html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.app {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
    height: 50vw;
    min-width: 1200px;
    min-height: 600px;
    .bg {
        width: 100%;
    }
}

.icon-wrapper {
    width: 836px;
    position: absolute;
    left: 100px;
    top: 40px;
    // border: 1px solid;
    border-radius: 50%;
    height: 836px;
    img {
        position: absolute;
        width: 60px;
    }
    // sin22.5°=(2-2^0.5)^0.5/2=0.383
    // cos22.5°=(2+2^0.5)^0.5/2=0.924
    // r=418px;
    // 418/sqrt2=295.5px;
    $r:418px;
    $rr: 295.5px;
    .img1 {
        left: 418px;
    }
    .img2 {
        left: 0.383 * $r + $r;
        top: $r - 0.924 * $r;
    }
    .img3 {
        left: $rr + $r;
        top: $r - $rr;
    }
    .img4 {
        left: $r + 0.924 * $r;
        top: $r - 0.383 * $r;
    }
    .img5 {
        left: 836px;
        top: 418px;
    }
    .img6 {
        left: $r + 0.924 * $r;
        top: $r + 0.383 * $r;
    }
    .img7 {
        left: $rr + $r;
        top: $rr + $r;
    }
    .img8 {
        left: 0.383 * $r + $r;
        top: $r + 0.924 * $r;
    }
    .img9 {
        left: 416px;
        top: 836px;
    }
    .img10 {
        left: $r - 0.383 * $r;
        top: $r + 0.924 * $r;
    }
    .img11 {
        left: $r - $rr;
        top: $rr + $r;
    }
    .img12 {
        left: $r - 0.924 * $r;
        top: $r + 0.383 * $r;
    }
    .img13 {
        left: 0;
        top: 418px;
    }
    .img14 {
        left: $r - 0.924 * $r;
        top: $r - 0.383 * $r;
    }
    .img15 {
        left: $r - $rr;
        top: $r - $rr;
    }
    .img16 {
        left: $r - 0.383 * $r;
        top: $r - 0.924 * $r;
    }
    img:hover {
        width: 100px;
        transition: all 0.3s linear;
        cursor: pointer;
    }
}